<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
      <h:outputStylesheet library="css" name="styles.css"/>
      <title>#{msgs.indexWindowTitle}</title>
   </h:head>

   <h:body>
      <h:outputText value="#{msgs.indexPageTitle}" styleClass="emphasis"/>
      <h:form>
         <h:panelGrid columns="2">
            #{msgs.namePrompt}
            <h:inputText value="#{form.name}"/>
            #{msgs.contactMePrompt}
            <h:selectBooleanCheckbox value="#{form.contactMe}"/>
            #{msgs.bestDayPrompt}
            <h:selectManyMenu value="#{form.bestDaysToContact}">
               <f:selectItems value="#{form.daysOfTheWeek}" var="w"
                              itemLabel="#{w.dayName}" itemValue="#{w.dayNumber}"/>
            </h:selectManyMenu>
            #{msgs.yearOfBirthPrompt}
            <h:selectOneMenu value="#{form.yearOfBirth}" required="true">
               <f:selectItems value="#{form.yearItems}"/>
            </h:selectOneMenu>
            #{msgs.colorPrompt}
            <h:selectManyCheckbox value="#{form.colors}"
                                  selectedClass="selected" disabledClass="disabled"
                                  onchange="submit()">
               <f:selectItems value="#{form.colorItems}"/>
            </h:selectManyCheckbox>
            #{msgs.languagePrompt}
            <h:selectManyListbox size="5" value="#{form.languages}">
               <f:selectItems value="#{form.languageItems}"/>
            </h:selectManyListbox>
            #{msgs.educationPrompt}
            <h:selectOneRadio value="#{form.education}" 
                              layout="pageDirection">
               <f:selectItems value="#{form.educationItems}"/>
            </h:selectOneRadio>
         </h:panelGrid>
         <h:commandButton value="#{msgs.buttonPrompt}" action="showInformation"/>
      </h:form>
      <h:messages/>
   </h:body>
</html>
